<template>
  <div class="wrapper">
    <div class="nav">
        <div class="top">
          <img :src="detatilData.big_img" alt="" />
        </div>
        <div class="title">
          <p>{{detatilData.title}}</p>
        </div>
        <div class="autor">
          <p>{{detatilData.author}}</p>
        </div>
        <div class="Collection">
          <img  @tap="handleCollection" :src="isCollection ? '/static/images/shoucang2.png':'/static/images/shoucang1.png '" alt="" />
          <p>来收藏呀 小老弟</p>
        </div>
        <div class="dec">
          <p>{{detatilData.dec}}
          </p>
        </div>
      <div class="sharea">
        <img  @tap="handleShare" src=" /static/images/fenxiang.png" alt="" />
        <button open-type="share">求求你别分享</button>
      </div>

    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  export default {
    // onLoad(options){
    //   console.log(options);
    // }小程序方法
    data(){
      return {
        detatilData:{},
        //当前未被收藏
        isCollection:false
      }
    },
    beforeMount(){
      console.log(this);
      //this.$mp.query.index取代onload 的options
      this.index =this.$mp.query.index
      //更新数据
      this.detatilData=this.listTmp[this.$mp.query.index]

      //本地是否有收藏的缓存
      let oldStorage =wx.getStorageSync('Collection')
      if(!oldStorage){
        wx.setStorage({
          key:'Collection',
          data:{}
        })
      }else{
        this.isCollection= (oldStorage[this.index] ? true:false)
      }

    },
    computed:{
      ...mapState(['listTmp'])
    },
    methods:{
      handleCollection(){
        let Collection=!this.isCollection;
        this.isCollection=Collection;
        let title = this.isCollection ? '来了就别想走呀':'走你，小老弟'
        //显示消息提示框
          wx.showToast({
            title,
            icon: 'success',
            duration: 2000
          })
        //读取之前本地缓存的状态查看是否收藏
        //wx。getStorageSync 使用 本地缓存中指定的 key
        let oldStorage =wx.getStorageSync('Collection')
        oldStorage[this.index]=Collection
        //将本次设置结果缓存给本地
        wx.setStorage({
          key:'Collection',
          data:oldStorage
        })
      },
      handleShare(){
        wx.showActionSheet({
          itemList:[
            '分享给朋友圈','分享给微博','分享给微信好友','以上功能均未实现','说了别分享还不信'
          ]
        })
      }

    }

  }
</script>

<style scoped>

.wrapper{
  width:100%;
  margin-top:9rpx;
}
  .nav{
    width:95%;
    margin:0 auto;
    border-radius:20rpx;
    border:12rpx solid red;

  }
  .top{
    display:flex;
    justify-content:center;
    height:551rpx;
    align-items:center;

  }
  .top>img{
    border-radius:10rpx;
  }
  .title{
    display:flex;
    justify-content:center;
    font-size:42rpx;

  }
  .autor{
    display:flex;
    justify-content:center;
    height:70rpx;
    align-items:center;

  }
.Collection{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height: 120rpx;

}.Collection>img{
   height:66rpx;
   width:66rpx;


 }
  .dec{
    display:flex;
    justify-content:center;
    margin-top:28rpx;
    margin-bottom:140rpx;
  }
  .sharea{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    height: 200rpx;

  }
  .sharea>img{
    height: 80rpx;
    width: 80rpx;
  }
 button::after{
    border:0rpx;
    color:#000;


  }

</style>
